<template>
	<div class="cattle-detail-view">
		<mt-header fixed title="牛人榜" class="mt-header">
			<router-link to="/home" slot="left">
                <mt-button icon="back"></mt-button>
            </router-link>
		</mt-header>
		<div class="info">
			<div class="info-header">
				<div class="info-header-img">
					<img :src="cattleDetail.market.pic" alt="">
				</div>
				<div class="info-header-text">
                    <div class="info-header-text-header">
                        <h4>{{cattleDetail.market.name}}</h4>
                        <router-link :to="{path: '/follow-cattle/'+cattleDetail.market.id+'/'+cattleDetail.market.name}">跟随牛人</router-link>
                    </div>
					
					<div class="info-header-text-body">
						<div class="info-header-text-body-line">
							<p><span>盈利率</span>{{ (+cattleDetail.profitrate).toFixed(2)+'%' || '0'}}</p>
							<p><span>准确率</span>{{cattleDetail.accuracy+'%' || '0'}}</p>
						</div>
						<div class="info-header-text-body-line">
							<p><span>回撤率</span>{{cattleDetail.loss+'%' || '0'}}</p>
							<p><span>总盈亏</span>{{cattleDetail.zprofit}}</p>
						</div>
						
					</div>
				</div>
			</div>
			<div class="spacing"></div>
			<div class="info-body">
				<div class="info-body-line">
					<div>
						<p>{{cattleDetail.maximumposition}}</p>
						<span>单笔最大持仓</span>
					</div>
					<div>
						<p>{{cattleDetail.lossaveraging}}</p>
						<span>亏损单平均亏损额</span>
					</div>
					<div>
						<p>{{cattleDetail.maxloss}}</p>
						<span>单笔最大亏损</span>
					</div>
				</div>

				<div class="info-body-line">
					<div>
						<p>{{cattleDetail.valuedRowItem}}</p>
						<span>交易次数</span>
					</div>
					<div>
						<p>{{parseInt(cattleDetail.sum)}}</p>
						<span>总手数</span>
					</div>
					<div>
						<p>{{cattleDetail.averagetransactiontimes}}</p>
						<span>平均交易次数</span>
					</div>
				</div>

				<div class="info-body-line">
					<div>
						<p>{{cattleDetail.zonghuoli || "待定"}}</p>
						<span>总获利点数</span>
					</div>
					<div>
						<p>{{cattleDetail.pingjunhouli || "待定"}}</p>
						<span>平均获利点数</span>
					</div>
					<div>
						<p>{{cattleDetail.winningprobability}}</p>
						<span>胜率</span>
					</div>
				</div>

				<div class="info-body-line">
					<div>
						<p>{{(+cattleDetail.totalPositiveN).toFixed(2)}}</p>
						<span>累计获利</span>
					</div>
					<div>
						<p>{{(+cattleDetail.ftotalPositiveN).toFixed(2)}}</p>
						<span>累计亏损</span>
					</div>
					<div>
						<p>{{cattleDetail.averageearnings}}</p>
						<span>每笔单平均盈利能力</span>
					</div>
				</div>

				<div class="info-body-line">
					<div>
						<p>{{cattleDetail.averageprofitabilityofearnings}}</p>
						<span>盈利单平均获利能力</span>
					</div>
					<div></div>
					<div></div>
				</div>
			</div>
		</div>
		<div class="spacing"></div>
		<my-chart class="chart chart1" :option="option1" :data="cattleDetail.yield"></my-chart>
		<div class="spacing"></div>	
        <my-chart class="chart chart1" :option="option2"  :data="cattleDetail.yield" :month="true"></my-chart>


        <!-- <div v-html="cattleDetail2"></div> -->
		<my-footer></my-footer>
	</div>
</template>

<script>
	import { mapState } from 'vuex'
	import MyChart from '@/components/mychart'
	export default {
		name: 'CattleDetailView',
		components: {MyChart},
		data() {
			return {
				option1 : {
                    color:['#d36d82'],
                    title:{
                        text:'总收益趋势图'
                    },
                    grid: {
                    	left: '3%',
				        right: '4%',
				        bottom: '10%',
				        containLabel: true
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    series:[{
                        areaStyle: {}
                    }]
				},
                option2 : {
                    color:['#d36d82'],
                    title:{
                        text:'每月收益'
                    },
                    grid: {
                        left: '15%',
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    series:[{
                        type: 'bar'
                    }]
                }
				
			}
		},
		computed: {
			...mapState({
                cattleDetail: state => state.cattle.cattleDetail
                // cattleDetail2: state => state.cattle.cattleDetail2
            }),

            
		},
        watch:{
            // cattleDetail2(curVal,oldVal) {
            //     console.log("55555555555555555555555")
            //     console.log(curVal)
            // }
        },
		methods: {
			getCattleDetail () {
				this.$store.dispatch({
					type: 'getCattleDetail',
					id: this.$route.params.id
				})
			},
            parseToDOM(str){
                var div = document.createElement("div");
                if(typeof str == "string"){
                    div.innerHTML = str
                }
                return div.childNodes;
            }
		},
		created () {
			this.getCattleDetail()
		}
	}
</script>

<style scoped>
	.cattle-detail-view {
		padding: 40px 15px;
	}
	.mt-header {
        background: #fff;
        color: #666;
        border-bottom: 1px solid #FFF54C;
    }
	.spacing {
        height: 10px;
        background: #eee;
        margin: -1px -15px 0 -15px;
    }
    .info-header {
    	display: flex;
    	align-items: center;
    	padding: 10px 0;
    	text-align: left;
    }
    .info-header-img {
    	width: 60px;
    	height: 60px;
    	border-radius: 50%;
    	border: 1px solid #ccc;
    	overflow: hidden;

    	display: flex;
    	align-items: center;
    }
    .info-header-img img {
    	height: 100%;
    	
    }
    .info-header-text {
    	flex: 1;
    	display: flex;
    	flex-direction: column;
    	padding-left: 15px;
    }
    .info-header-text-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 5px 0;
    }
    .info-header-text-header h4 {
    	margin: 0 0 3px 0;
    	font-size: 14px;
    }
    .info-header-text-header a {
        width: 80px;
        height: 25px;
        line-height: 27px;
        border-radius: 5px;
        background: #FFF54C;
        border:1px solid #eee;
        letter-spacing: 2px;
        text-decoration: none;
        color: #666;
        font-size: 12px;
        text-align: center;
    }
    .info-header-text-body {
    	display: flex;
    	justify-content: space-between;
    }
    .info-header-text-body > div {
    	flex: 1;
    }
    .info-header-text-body-line p{
    	margin: 4px 0;
		font-size: 13px;
		color: #555;
    }
    .info-header-text-body-line span {
    	display: inline-block;
    	padding-right: 10px;
    	font-size: 12px;
    	font-weight: normal;
    	color: #999;
    }
	
	.info-body {
		padding: 12px 0;
	}
    .info-body-line {
    	display: flex;
    	justify-content: space-between;
    }
    .info-body-line > div {
    	position: relative;
    	flex:1;
    }
	.info-body-line:not(:last-child) > div:not(:first-child)::before {
		content: '';
		position: absolute;
		width: 1px; height: 20px;
		left: 0; top: 13px;
		background: #eee;
    }
    .info-body-line:last-child > div:nth-child(2)::before {
		content: '';
		position: absolute;
		width: 1px; height: 20px;
		left: 0; top: 13px;
		background: #eee;
    }
    .info-body-line p {
        margin: 5px 0 5px 0;
        font-size: 12px;
        color: #555;
        line-height: 16px;
    }
    .info-body-line span {
        font-size: 12px;
        color: #999;
    }
    .chart {
    	padding-top: 15px;
    }
</style>